<template>
  <div class="payment-success">
    <!-- 页面标题 -->
    <van-nav-bar
        title="支付成功"
        left-text="返回"
        left-arrow
        @click-left="goBack"
    />

    <!-- 主要内容区域 -->
    <div class="content">
      <van-image
          width="80%"
          height="80%"
          fit="cover"
          position="left"
          src="src/image/success.png"
      />

      <!-- 中央提示信息 -->
      <van-cell title="支付金额" value="¥100.00">
        <template #value>
          <div style="text-align: center">
            {{store.price}}元
          </div>
        </template>
      </van-cell>
      <van-cell title="支付时间" value="2024-06-22 14:30:00">
        <template #value>
          <div style="text-align: center">
            {{store.createTime}}
          </div>
        </template>
      </van-cell>


    </div>
  </div>
</template>

<script setup>
// 导入pinia
import {useStore} from "../pinia/index.js";
// 声明pinia
const store = useStore();

// 返回按钮点击事件处理
const goBack = () => {
  window.history.back();
}


</script>

<style scoped>
.payment-success {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
}

/* 可根据需求添加其他样式 */
</style>